<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

const scene = new THREE.Scene();


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(75, width / height, 10, 3000);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const directionalLight = new THREE.SpotLight(0xffffff, 10000.0);
directionalLight.position.set(100, 100, 100);
const directionalLightHelp = new THREE.SpotLightHelper(directionalLight);
scene.add(directionalLight);
scene.add(directionalLightHelp);

// 环境光（补充：避免物体全黑）
const ambientLight = new THREE.AmbientLight(0x040404);
scene.add(ambientLight);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);



const stats = new Stats;
stats.showPanel(0);
document.body.appendChild(stats.dom);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    stats.update();
    renderer.render(scene, camera);
})


const loader = new GLTFLoader();
loader.load('./1.glb', gltf => {
    console.log(gltf);

    // 例如获取模型中的特定对象
    const model = gltf.scene;
    const mesh = model.getObjectByName('Cube');

    if (mesh) {
        mesh.position.set(0, 0, 0);
    }

    renderer.render(scene, camera);

})



</script>